/* ---------------------------------------- 默认css针对16:9标准比例屏幕微信----------------------------------------*/
@font-face { font-family: FZLT; src: url('https://cdn.dhteam.net/sephora/h5/css/fzlt.TTF');}
@font-face { font-family: FZLTB; src: url('https://cdn.dhteam.net/sephora/h5/css/fzltb.TTF');}
@font-face { font-family: SSM; src: url('https://cdn.dhteam.net/sephora/h5/css/ssm.otf');}
@font-face { font-family: FZHT; src: url('https://cdn.dhteam.net/sephora/h5/css/fzht.TTF');}
@font-face { font-family: FZLTZCHK; src: url('https://cdn.dhteam.net/sephora/h5/css/FZLTZCHK.TTF');}
@font-face { font-family: SSB; src: url('https://cdn.dhteam.net/sephora/h5/css/ssb.otf');}
*{
	font-family: FZLT;
}
.fontLoad{
	position: fixed;
	top: 0;
	left: 0;
	font-family: FZLT;
}
.fontLoad2{
	position: fixed;
	top: 0;
	left: 0;
	font-family: FZLTB;
}
.fontLoad3{
	position: fixed;
	top: 0;
	left: 0;
	font-family: FZHT;
}
.fontLoad4{
	position: fixed;
	top: 0;
	left: 0;
	font-family: FZLTZCHK;
}
.fontLoad5{
	position: fixed;
	top: 0;
	left: 0;
	font-family: SSB;
}
.fontLoad6{
	position: fixed;
	top: 0;
	left: 0;
	font-family: SSM;
}
html,body,article{
	position: fixed;
	padding: 0;
	margin: 0;
	height: 100%!important;
    width: 100%;
	overflow: hidden;
	-webkit-text-size-adjust:100%!important;
	background-color: #ca001e;
}
.none{
	display: none;
}
.hide{
	opacity: 0;
}
a{
	cursor: pointer;
}
a, a:visited{
	color: #fff;
}
section{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top:0;
    left: 0;
    z-index: 3;
}
aside{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
    z-index: 19;
    background-color: rgba(0,0,0,0.85);
}
.full{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
img{
	pointer-events: none;
}

.starTitle{
	width: 6.17rem;
	height: 1.95rem;
}
.starTitle .star{
	position: absolute;
}
.starTitle .star1{
	top: 1.3rem;
	left: -0.5rem;
	width: 0.6rem;
	transform: rotate(30deg);
	-webkit-animation: lighting 1.1s ease infinite;
}
.starTitle .star2{
	top: 0rem;
	left: 1.5rem;
	width: 0.6rem;
	transform: rotate(-20deg);
	-webkit-animation: lighting 0.8s ease infinite;
}
.starTitle .star3{
	top: 1.3rem;
	left: 3.4rem;
	width: 0.55rem;
	transform: rotate(-10deg);
	-webkit-animation: lighting 1.2s ease infinite;
}
.starTitle .star4{
	top: -0.2rem;
	left: 5.7rem;
	width: 0.5rem;
	transform: rotate(15deg);
	-webkit-animation: lighting 1.5s ease infinite;
}
.starTitle .star5{
	top: 1.2rem;
	left: 5.5rem;
	width: 0.9rem;
	-webkit-animation: lighting 2s ease infinite;
}
/* public end */
.scrolling{
	-webkit-animation: scrolling 5s linear infinite;
}
@-webkit-keyframes scrolling{
	0%{transform: translate(0,0);}	
	100%{transform: translate(-100%,0);}
}
.lighting3{
	-webkit-animation: lighting3 2s ease forwards;
}
@-webkit-keyframes lighting3{
	0%{color: #000;background-color: rgba(202, 0, 30, 0);}
	25%{ color: #fff;background-color: rgba(202, 0, 30, 1);}
	50%{color: #000;background-color: rgba(202, 0, 30, 0);}
	75%{ color: #fff;background-color: rgba(202, 0, 30, 1);}
	100%{color: #000;background-color: rgba(202, 0, 30, 0);}
}
.lighting{
	-webkit-animation: lighting 1.2s ease infinite;
}
@-webkit-keyframes lighting{
	0%{opacity: 0.3;}
	50%{opacity: 1;}
	100%{opacity: 0.3;}
}
.moving1{
	-webkit-animation: moving1 1.5s ease infinite;
}
@-webkit-keyframes moving1{
	0%{transform: translateX(0);}
	50%{transform: translateX(-0.3rem);}
	100%{transform: translateX(0);}
}
.bookAnime{
	-webkit-animation: bookAnime 2s linear forwards;
}
@-webkit-keyframes bookAnime{
	0%{opacity: 1;transform: rotateX(0deg);}
	50%{opacity: 1;}
	100%{opacity: 0;transform: rotateX(180deg);}
}
/* anime end */

#indexBox{
	background: url(https://cdn.dhteam.net/sephora/h5/images/indexBox/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#indexBox .cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: auto;
	transform: translate(0, -50%);
}
#indexBox .formBox{
	width: 7.06rem;
	height: 7.29rem;
	background: url(https://cdn.dhteam.net/sephora/h5/images/indexBox/k.png) no-repeat;
	background-size: cover;
	margin: 0 0 0.35rem 0.35rem;
}
#indexBox .ruleBox{
	width: 3.4rem;
	height: auto;
	color: #fff;
	margin: 0 auto;
}
#indexBox .ruleBox h3{
	text-align: center;
	font-size: 0.26rem;
	padding-bottom: 0.15rem;
	font-weight: bold;
}
#indexBox .ruleBox p{
	font-size: 0.18rem;
	text-align: justify;
	line-height: 1.5;
}
#indexBox .ruleBox p.sp{
	font-size: 0.18rem;
	text-align: center;
	line-height: 1.5;
	padding-top: 0.22rem;
}
#indexBox .logo{
	position: absolute;
	top: 0.7rem;
	left: 50%;
	width: 2.9rem;
	margin-left: -1.45rem;
}
#indexBox .title{
	position: absolute;
	top: 2.1rem;
	left: 50%;
	width: 4.6rem;
	margin-left: -2.3rem;
}
#indexBox .item{
	position: absolute;
	top: 4.5rem;
	left: 50%;
	width: 2.9rem;
	height: 0.5rem;
	margin-left: -1.45rem;
	border: 0.03rem solid #ca001e;
	text-align: center;
}
#indexBox .item:last-child{
	top: 5.3rem
}
#indexBox .item:before{
	content: '';
	display: block;
	position: absolute;
	top: -0.03rem;
	left: 0;
	width: 1rem;
	height: 0.5rem;
	background-color: #ca001e;
}
#indexBox .item .label{
	float: left;
	width: 1rem;
	height: 0.47rem;
	background-color: #ca001e;
	color: #fff;
	text-align: center;
	line-height: 0.47rem;
	font-size: 0.3rem;
	font-weight: bold;
	font-family: SSB;
}
#cardNo{
	font-size: 0.26rem;
	float: left;
	width: 1.8rem;
	height: 0.47rem;
	text-align: center;
	font-weight: bold;
	font-family: FZHT;
}
#cardNo::-webkit-input-placeholder{
	color: #8e8e8e;
}
#indexBox .item span{
	font-size: 0.26rem;
	font-weight: bold;
	line-height: 0.5rem;
	font-family: FZLTZCHK;
}
#indexBox .inputBox{
	display: flex;
	align-items: center;
}
#indexBox .inputBox .label{
	margin-right: 0.55rem;
}
#indexBox .inputBox input{
	font-size: 0.26rem;
	font-weight: bold;
	width: 0.26rem;
	font-family: FZLTZCHK;
	position: relative;
}
#indexBox .inputBox .mask{
	z-index: 9;
}
#name{
	margin: 0 0.02rem;
	z-index: 99;
}
#indexBox .inputBox input::-webkit-input-placeholder{
	color: #000;
}
#indexBox .loginBtn{
	position: absolute;
	top: 6.3rem;
	right: -0.1rem;
	width: 1.7rem;
	height: 1.39rem;
}
#indexBox .pattern{
	position: absolute;
	bottom: 0.2rem;
	right: 0.7rem;
	width: 0.8rem;
}
#indexBox .heart{
	position: absolute;
	bottom: 1rem;
	left: 0.3rem;
	width: 0.6rem;
}
/* indexBox end */

#brandBox .bg1{
	background: url(https://cdn.dhteam.net/sephora/h5/images/brandBox/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#brandBox .bg2{
	background: url(https://cdn.dhteam.net/sephora/h5/images/brandBox/bg2.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#brandBox .logoBottom{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4.8rem;
}
#brandBox .cont{
	position: absolute;
	top: 48%;
	left: 0;
	width: 	100%;
	height: 10rem;
	transform: translate(0,-50%);
}
#brandBox .bar{
	position: absolute;
	top: 1.3rem;
	left: 50%;
	width: 5.8rem;
	margin-left: -2.9rem;
}
#brandBox .scoreBox{
	position: absolute;
	top: 0;
	left: 0.8rem;
	width: 2.59rem;
	height: 0.82rem;
	background: url(https://cdn.dhteam.net/sephora/h5/images/brandBox/k.png) no-repeat;
	background-size: 100%;
	line-height: 0.97rem;
	color: #fff;
	font-size: 0.36rem;
	font-weight: bold;
	text-align: right;
	padding-right: 0.3rem;
}
#brandBox .bookBox{
	perspective: 900;
	-webkit-perspective: 900; /* Safari 和 Chrome */
}
#brandBox .bookBox .cover{
	transform-origin: top center;
}
#brandBox .logoBox{
	position: absolute;
	top: 2.03rem;
	left: 50%;
	width: 5.57rem;
	height: 6.26rem;
	margin-left: -2.78rem;
}
#brandBox .logoBox .logos{
	position: absolute;
	top: 0.42rem;
	left: 0.42rem;
	width: 5rem;
	height: 5rem;
}
#brandBox .logoBox .logos.act .logo{
	opacity: 0;
}
#brandBox .logoBox .logos .logo{
	float: left;
	width: 1.4rem;
	height: 1.4rem;
	margin: 0 0.27rem 0.24rem 0;
}
#brandBox .logoBox .logos .logo:nth-child(3n){
	margin-right: 0;
}
#brandBox .btnBox{
	position: absolute;
	bottom: 0.34rem;
	left: 50%;
	width: 4.72rem;
	height: 0.58rem;
	margin-left: -2.36rem;
	background-color: #212121;
	border-radius: 0.1rem;
}
#brandBox .btnBox .startBtn{
	position: absolute;
	top: 0rem;
	left: 0.1rem;
	width: 1.2rem;
	height: 0.62rem;
}
#brandBox .btnBox .pen{
	position: absolute;
	top: 0.08rem;
	right: 0.15rem;
	height: 0.49rem;
}
#brandBox .tips{
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	font-size: 0.5rem;
	color: #fff;
	font-weight: bold;
	text-align: right;
	font-family: SSB;
	letter-spacing: 0.05rem;
}
#brandBox .pattern1{
	position: absolute;
	top: 0.5rem;
	right: 0.3rem;
	width: 1.33rem;
}
#brandBox .pattern2{
	position: absolute;
	bottom: 0.3rem;
	left: 0.3rem;
	width: 1.1rem;
}
#brandBox .pattern3{
	position: absolute;
	top: 0.3rem;
	right: 0.1rem;
	width: 1.6rem;
}
#brandBox .pattern4{
	position: absolute;
	bottom: -0.5rem;
	right: 0.2rem;
	width: 1.1rem;
}
/* brandBox end */

#QAbox{
	background: url(https://cdn.dhteam.net/sephora/h5/images/brandBox/bg2.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#QAbox .logoBottom{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 4.8rem;
}
#QAbox .cont{
	position: absolute;
	top: 52%;
	left: 0;
	width: 	100%;
	height: 9.1rem;
	transform: translate(0,-50%);
}
#QAbox .cont .kuang{
	width: 5.57rem;
	height: 7.59rem;
	margin: 0 auto;
	background: url(https://cdn.dhteam.net/sephora/h5/images/QAbox/k.png) no-repeat;
	background-size: cover;
	background-position: center;
}
#QAbox .cont .okBtn{
	position: absolute;
	bottom: 0rem;
	right: 0.3rem;
	width: 1.57rem;
	height: 1.26rem;
}
#QAbox .cont .introBox{
	position: absolute;
	top: 0.24rem;
	left: 0.43rem;
	width: 4.72rem;
	height: 0.85rem;
}
#QAbox .cont .introBox .logo{
	width: 0.85rem;
	height: 0.85rem;
}
#QAbox .cont .introBox .word{
	width: 3.7rem;
	height: auto;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
	line-height: 1.5;
	text-align: justify;
	font-size: 0.16rem;
}
#QAbox .cont .questionBox{
	position: absolute;
	top: 2.37rem;
	left: 0.63rem;
	width: 4.2rem;
	font-size: 0.27rem;
	font-weight: bold;
	display: flex;
}
#QAbox .cont .questionBox div{
	font-size: 0.27rem;
	height: 100%;
	line-height: 1.3;
}
#QAbox .cont .questionBox div:first-child{
	width: 0.4rem;
}
#QAbox .cont .questionBox div:last-child{
	flex: 1;
}
#QAbox .cont .answerBox{
	position: absolute;
	top: 3.9rem;
	left: 0.63rem;
	width: 4.2rem;
}
#QAbox .cont .answerBox .answer{
	width: 100%;
	height: 0.7rem;
	margin-bottom: 0.3rem;
	cursor: pointer;
}
#QAbox .cont .answerBox .answer .chose{
	position: absolute;
	top: 0;
	right: 0;
	height: 0.7rem;
}
#QAbox .cont .answerBox .answer .word{
	width: 2.9rem;
	height: auto;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
	font-size: 0.27rem;
	text-align: justify;
	display: flex;
}
#QAbox .cont .answerBox .answer .word div{
	font-size: 0.27rem;
	height: 100%;
	line-height: 1.3;
}
#QAbox .cont .answerBox .answer .word div:first-child{
	width: 0.4rem;
}
#QAbox .cont .answerBox .answer .word div:last-child{
	flex: 1;
}
/* QAbox end */

#uploadBox{
	background: url(https://cdn.dhteam.net/sephora/h5/images/brandBox/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#uploadBox .cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 	100%;
	height: 9.3rem;
	transform: translate(0,-50%);
}
#uploadBox .starTitle{
	margin: 0 auto 0.4rem;
	position: relative;
}
#uploadBox .uploadForm{
	width: 6.35rem;
	height: 6.9rem;
	margin-left: 0.97rem;
	background: url(https://cdn.dhteam.net/sephora/h5/images/uploadBox/cont.png) no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	text-align: center;
	padding-right: 0.77rem;
}
#uploadBox .t{
	font-size: 0.34rem;
	padding-top: 0.9rem;
	font-weight: bold;
	font-family: FZHT;
}
#uploadBox .intro{
	font-size: 0.2rem;
	padding-top: 0.1rem;
	padding-bottom: 0.8rem;
	line-height: 1.5;
}
#uploadBox .stepBox{
	display: flex;
	padding: 0 0.37rem;
}
#uploadBox .stepBox .step{
	line-height: 1.3;
	font-size: 0.18rem;
	width: 50%;
}
#uploadBox .code{
	position: absolute;
	top: 3.32rem;
	left: 0.74rem;
	width: 1.7rem;
	pointer-events: auto;
}
#uploadBox .tips{
	position: absolute;
	top: 5.15rem;
	left: 0.74rem;
	width: 1.7rem;
	color: #fff;
	font-size: 0.2rem;
	text-align: center;
}
#uploadBox .uploadBtn{
	position: absolute;
	top: 3.32rem;
	right: 1.5rem;
	width: 1.8rem;
	height: 2.2rem;
}
/* uploadBox end */

#rewardBox{
	background: url(https://cdn.dhteam.net/sephora/h5/images/rewardBox/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#rewardBox .cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 	100%;
	height: 9.3rem;
	transform: translate(0,-50%);
}
#rewardBox .starTitle{
	margin: 0 auto 0.4rem;
	position: relative;
}
#rewardBox .cont .reward{
	width: 6.84rem;
	height: 6.84rem;
	position: relative;
	margin: 0 auto;
}
#rewardBox .cont .reward .shadow{
	position: absolute;
	top: 0;
	left: 0;
	width: 7.11rem;
}
#rewardBox .cont .reward .circle3{
	position: absolute;
	top: 0;
	left: 0;
	width: 6.84rem;
}
#rewardBox .cont .reward .circle2{
	position: absolute;
	top: 2.2rem;
	left: 2.75rem;
	width: 1.3rem;
}
#rewardBox .cont .reward .lotteryBtn{
	position: absolute;
	top: 3rem;
	left: 2.93rem;
	width: 1.01rem;
	height: 0.85rem;
	z-index: 9;
}
#rewardBox .cont .heart{
	position: absolute;
	bottom: 0;
	right: 0.5rem;
	width: 1.45rem;
}
#awardBtn, #rankBtn{
	position: absolute;
	bottom: -1rem;
	right: 1.6rem;
	width: 1.53rem;
	height: 0.72rem;
	z-index: 99;
}
#awardBtn{
	left:1.6rem;
}
#rewardBox .cont p.tips{
	font-size: 0.2rem;
	text-align: center;
	line-height: 1.5;
	padding-top: 1.35rem;
	color: #fff;
	letter-spacing: 0.02rem;
}
/* rewardBox end */

#rankBox{
	background: url(https://cdn.dhteam.net/sephora/h5/images/rankBox/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#rankBox .cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 	100%;
	height: 11rem;
	transform: translate(0,-50%);
}
#rankBox .pattern{
	position: absolute;
	top: 0.5rem;
	right: 0.3rem;
	width: 1.1rem;
}
#rankBox .selfBox{
	width: 100%;
	display: flex;
	padding: 0 1rem 0.4rem;
}
#rankBox .selfBox .score{
	width: 50%;
	text-align: center;
}
#rankBox .selfBox .score .label{
	text-align: center;
	padding-bottom: 0.15rem;
}
#rankBox .selfBox .score .label img{
	width: 1.81rem;
}
#rankBox .selfBox .score .num{
	text-align: center;
	letter-spacing: -0.15rem;
}
#rankBox .selfBox .score .num img{
	height: 0.65rem;
}
#rankBox .rankBox{
	width: 6.11rem;
	height: 7.27rem;
	margin-left: 0.47rem;
	background: url(https://cdn.dhteam.net/sephora/h5/images/rankBox/cont.png?v=2) no-repeat;
	background-size: cover;
	background-position: center;
	padding-top: 1.15rem;
	padding-left: 0.55rem;
}
#rankBox .rankBox .scrollBox{
	width: 3.63rem;
	height: 5.2rem;
	overflow: hidden;
	margin: 0 auto;
}
#rankBox .rankBox .scrollBox .scroll{
	width: 100%;
	height: auto;
	padding-bottom: 0.3rem;
}
#rankBox .rankBox .scrollBox .block{
	width: 100%;
	height: 0.8rem;
	margin-bottom: 0.2rem;
}
#rankBox .rankBox .scrollBox .block:last-child{
	margin-bottom: 0;
}
#rankBox .rankBox .scrollBox .block .word{
	height: 0.55rem;
}
#rankBox .rankBox .scrollBox .block .word span{
	color: #fff;
	font-size: 0.24rem;
	font-family: SSM;
	line-height: 0.7rem;
	position: relative;
}
#rankBox .rankBox .scrollBox .block .word .wordImg{
	letter-spacing: -0.2rem;
	float: left;
	display: flex;
    align-items: center;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img{
	height: 0.55rem;
	position: relative;	
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(1){
	left: 0;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(2){
	left: -0.08rem;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(3){
	left: -0.16rem;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(4){
	left: -0.24rem;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(5){
	left: -0.32rem;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(6){
	left: -0.4rem;
}
#rankBox .rankBox .scrollBox .block .word .wordImg img:nth-child(7){
	left: -0.48rem;
}
#rankBox .rankBox .scrollBox .block .barBox{
	width: 3.63rem;
	height: 0.3rem;
	background-color: #000;
	border-radius: 0.3rem;
	padding: 0.03rem;
	box-shadow: 0 0 0.1rem rgba(255,255,255,0.5) inset;
}
#rankBox .rankBox .scrollBox .block .barBox .bar{
	width: 50%;
	height: 100%;
	background-color: #c40d2e;
	border-radius: 0.3rem;
	box-shadow: 0 0 0.1rem rgba(255,255,255,0.5) inset;
}
#rankBox .rankBox .scrollBox .block:nth-child(2n) .barBox .bar{
	background-color: #fff;
	border-radius: 0.3rem;
	box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.5) inset;
}
#rankBox .dataBox{
	width: 100%;
	position: relative;
	top: -0.1rem;
}
#rankBox .dataBox .t{
	width: 100%;
	text-align: center;
	padding-bottom: 0.1rem;
}
#rankBox .dataBox .t img{
	width: 1.44rem;
}
#rankBox .dataBox .wordBox{
	width: 5.6rem;
	height: 0.5rem;
	margin: 0 auto;
	background-color: #fff;
	border: 1px solid #000;
	overflow: hidden;
}
#rankBox .dataBox .wordBox .scrollBox,#rankBox .dataBox .wordBox .scrollBox2{
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	width: auto;
	min-width: 5.6rem;
	height: 100%;
	white-space:nowrap
}
#rankBox .dataBox .wordBox .scrollBox .item,#rankBox .dataBox .wordBox .scrollBox2 .item{
	display: inline-block;
	width: auto;
	padding: 0 0.3rem;
	height: 100%;
	font-size: 0.26rem;
	color: #000;
	line-height: 0.5rem;
	white-space:nowrap
}
#rankBox .awardBtn{
	width: 1.53rem;
	height: 0.72rem;
	margin: 0.1rem auto 0;
}
/* rankBox end */

#tipsBox{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 199;
	background-color: rgba(0,0,0,0);
}
#tipsBox .tips{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: inline-block;
	padding: 0.2rem 0.5rem;
	color: #fff;
	border-radius: 0.1rem;
	font-size: 0.26rem;
	background-color: rgba(0,0,0,0.7);
}
/* tipsBox end */

#awardTipsBox .cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 	100%;
	height: 9.3rem;
	transform: translate(0,-50%);
}
#awardTipsBox .starTitle{
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -3.08rem;
	transform: translate(0,3.4rem);
}
/* awardTipsBox end */

#awardListBox{
	background: url(https://cdn.dhteam.net/sephora/h5/images/rankBox/bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
}
#awardListBox .cont{
	position: absolute;
	top: 50%;
	left: 0;
	width: 	100%;
	height: 10rem;
	transform: translate(0,-50%);
}
#awardListBox .pattern{
	position: absolute;
	top: 0.5rem;
	right: 0.3rem;
	width: 1.1rem;
}
#awardListBox .title{
	display: block;
	width: 2.36rem;
	height: 0.61rem;
	margin: 0 auto 0.1rem;
}
#awardListBox .tips{
	text-align: center;
	padding-bottom: 0.3rem;
	font-size: 0.22rem;
	color:#fff;
	letter-spacing: 0.04rem;
}
#awardListBox .scrollBox{
	width: 5.3rem;
	height: 7.7rem;
	margin: 0.1rem auto 0.5rem;
	overflow: hidden;
}
#awardListBox .scrollBox .scroll{
	width: 100%;
	height: auto;
}
#awardListBox .scrollBox .block{
	width: 100%;
	height: auto;
	padding-bottom: 0.35rem;
}
#awardListBox .scrollBox .block .t{
	display: block;
	width: 1.04rem;
	height: 0.4rem;
	margin: 0 auto 0.15rem;
}
#awardListBox .scrollBox .block .box{
	width: 100%;
	height: auto;
	overflow: hidden;
}
#awardListBox .scrollBox .block .box .item{
	float: left;
	width: 1.72rem;
	height: 0.36rem;
	background-color: #fff;
	margin-right: 0.05rem;
	text-align: center;
	line-height: 0.36rem;
	font-style: 0.26rem;
	margin-bottom: 0.05rem;
	font-family: SSB;
}
#awardListBox .scrollBox .block .box .item.sp{
	margin-left: 1.77rem;
}
#awardListBox .scrollBox .block .box .item:nth-child(3n){
	margin-right: 0;
}
#awardListBox .rankBtn{
	width: 1.53rem;
	height: 0.72rem;
	margin: 0 auto;
}
/* awardListBox end */
/*---------------------------------------- 15:9 ----------------------*/

/*---------------------------------------- 16:9 ----------------------*/

/*---------------------------------------- 18:9 ----------------------*/
.screen189 #QAbox .cont{
	transform: translate(0,-50%) scale(1.25);
}
.screen189 #QAbox .cont .okBtn{
	right: 0.8rem;
}